<template>
  <div :class="classnames">
    <div class="modal">
      <h1>预约试驾</h1>
      <div class="close" @click="$emit('close')">
        <img src="static/img/close.svg" alt="">
      </div>
      <div class="form">
        <div class="row">
          <div class="key">姓名</div>
          <div class="value">
            <input type="text" placeholder="请填写姓名" @change="e => username = e.target.value">
          </div>
        </div>
        <div class="row">
          <div class="key">性别</div>
          <div class="value left">
            <div :class="'radio' + (selectedSex === 1 ? ' checked' : '')" @click="selectedSex = 1">
              <div class="circle"></div>
              <div class="label">男</div>
            </div>
            <div :class="'radio' + (selectedSex === 0 ? ' checked' : '')" @click="selectedSex = 0">
              <div class="circle"></div>
              <div class="label">女</div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="key">手机号码</div>
          <div class="value">
            <input type="text" placeholder="请填手机号码" @change="e => phone = e.target.value">
          </div>
        </div>
        <div class="row">
          <div class="key">所在省市</div>
          <div class="value two-select">
            <select name="province" id="province" @change="selectProvince" :class="selectedProvince === 'none' ? 'empty' : ''">
              <option value="none">请选择省份</option>
              <option v-for="p in provinces" :key="p.name" :value="p.name">{{p.name}}</option>
            </select>
            <select name="city" id="city" @change="selectCity" :class="selectedCity === 'none' ? 'empty' : ''">
              <option value="none">请选择城市</option>
              <option v-for="c in cities" :key="c.name" :value="c.name">{{c.name}}</option>
            </select>
          </div>
        </div>
        <div class="row">
          <div class="key">经销商</div>
          <div class="value">
            <select name="store" id="store" @change="selectStore" :class="selectedStore === 'none' ? 'empty' : ''">
              <option value="none">请选择经销商</option>
              <option v-for="s in stores" :key="s.code" :value="s.code">{{s.short}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="button" @click="submit">提 交</div>
      <div class="desc">您的信息将只用于广汽传祺相关市场活动，不会透露给第三方。</div>
    </div>
  </div>
</template>

<script>
import storeData from './store.json';
import log, { ACT } from '../log';
import alert from '../alert';

// var AV = window.AV;
// var APP_ID = 'lRpcPQLCkiHm1B8ImNejefwb-gzGzoHsz';
// var APP_KEY = 'tAvgfOVRaDFJlMSPCQyAbC8T';

// function initAV() {
//   AV.init({
//     appId: APP_ID,
//     appKey: APP_KEY,
//   });
// }

// initAV();

// function addReservation(data, callback) {
//   var Reservation = AV.Object.extend('reservation');
//   var reservation = new Reservation();
//   reservation.save(data).then(function(object) {
//     callback && callback(object);
//   });
// }

export default {
  props: ['show'],
  data() {
    return {
      username: '',
      selectedSex: 1,
      selectedProvince: 'none',
      selectedCity: 'none',
      selectedStore: 'none',
      phone: '',
    };
  },
  computed: {
    classnames() {
      return 'car-modal' + (this.show ? ' show' : '');
    },
    provinces() {
      return storeData;
    },
    cities() {
      const selectedProvince = this.selectedProvince;
      if (selectedProvince === 'none') return [];
      const p = storeData.filter(d => d.name === selectedProvince)[0];
      if (p) return p.cities;
      return [];
    },
    stores() {
      const selectedProvince = this.selectedProvince;
      if (selectedProvince === 'none') return [];
      const selectedCity = this.selectedCity;
      if (selectedCity === 'none') return [];
      const p = storeData.filter(d => d.name === selectedProvince)[0];
      if (!p) return [];
      const c = p.cities.filter(d => d.name === selectedCity)[0];
      if (!c) return [];
      return c.stores;
    }
  },
  methods: {
    selectProvince(data) {
      this.selectedProvince = data.target.value;
      if (data.target.value === 'none') {
        this.selectedCity = 'none';
        this.selectedStore = 'none';
      }
    },
    selectCity(data) {
      this.selectedCity = data.target.value;
      if (data.target.value === 'none') {
        this.selectedStore = 'none';
      }
    },
    selectStore(data) {
      this.selectedStore = data.target.value;
    },
    submit() {
      if (!(this.username && this.username.length > 0)) {
        alert('请填写姓名');
        return;
      }
      if (!(this.phone && this.phone.length > 0)) {
        alert('请填写手机号码');
        return;
      }
      if (this.selectedProvince === 'none') {
        alert('请选择省份');
        return;
      }
      if (this.selectedCity === 'none') {
        alert('请选择城市');
        return;
      }
      if (this.selectedStore === 'none') {
        alert('请选择经销商');
        return;
      }
      if (!(/^1\d{10}$/.test(this.phone))) {
        alert('请输入正确的手机号码');
        return;
      }
      // 增加预约
      const data = {
        username: this.username,
        sex: this.selectedSex, // 1男，0女
        store: this.selectedStore,
        phone: this.phone,
        province: this.selectedProvince,
        city: this.selectedCity,
      };
      log(ACT.submitReservation, `&data=${encodeURIComponent(JSON.stringify(data))}`);
      alert('预约成功');
      this.$emit('close');
    }
  },
}
</script>

<style lang="less">
.car-modal {
  opacity: 0;
  transition: all ease 0.3s;
  position: fixed;
  // top: 50%;
  width: 100%;
  height: 100%;
  // transform: translate(0, -50%);
  padding: 20px 20px;
  pointer-events: none;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;

  overflow: auto;

  &.show {
    opacity: 1;
    pointer-events: all;
  }

  .modal {
    position: relative;
    background: #fff;
    padding: 25px 17px;
    border-radius: 6px;
    color: #B0781E;
    flex-grow: 1;

    .close {
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(50%, -50%);

      img {
        height: 22px;
        width: 22px;
      }
    }

    h1 {
      color: #8B5807;
      font-size: 21px;
      text-align: center;
      margin-bottom: 25px;
    }

    .form {
      font-size: 12px;
      margin-bottom: 25px;

      .row {
        height: 30px;
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .key {
          width: 70px;
          flex-grow: 0;
          flex-shrink: 0;
        }

        .value {
          flex-grow: 1;
          flex-shrink: 1;
          display: flex;
          justify-content: space-between;

          &.left {
            justify-content: flex-start;
          }

          input,
          select {
            width: 100%;
            height: 30px;
            box-sizing: border-box;
            border: rgba(176, 120, 30, 0.5) solid 1px;
            border-radius: 3px;
            padding: 0 5px;
            color: rgb(176, 120, 30);
            background: #fff;
          }
          input::placeholder,
          input::placeholder {
            color: rgba(176, 120, 30, 0.5);
          }

          select.empty {
            color: rgba(176, 120, 30, 0.5);
          }

          &.two-select select {
            width: 47%;
          }

          .radio {
            display: flex;
            align-items: center;
            margin-right: 20px;

            .circle {
              height: 20px;
              width: 20px;
              border: rgba(176, 120, 30, 0.5) solid 1px;
              border-radius: 10px;
              position: relative;
            }

            .label {
              margin-left: 10px;
            }

            &.checked {
              .circle:after {
                content: '';
                position: absolute;
                width: 10px;
                height: 10px;
                background: rgb(176, 120, 30);
                border-radius: 10px;
                left: 4px;
                top: 4px;
              }
            }
          }
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .button {
      height: 40px;
      border-radius: 10px;
      background-image: linear-gradient(to bottom, #FCEBC0 0%, #F6C13A 45%, #F6BB24 60%, #FFCA42 100%);
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 22px;
      text-shadow: #9F4A00 0 1px 0;
      box-shadow: #D9A623 0 3px 0 0;
      margin-bottom: 16px;
    }

    .desc {
      font-size: 12px;
    }
  }
}
</style>